<!doctype html>
<html lang="en">
<head>
    <!-- Meta Properties -->
    <meta charset="UTF-8">
    <title>Open Agar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <!-- CSS -->
    <link rel="stylesheet" href="css/main.css" />
    <!-- Audio -->
    <audio id="split_cell" src="audio/split.mp3"></audio>
    <audio id="spawn_cell" src="audio/spawn.mp3"></audio>
</head>
<body>
    <div id="gameAreaWrapper">
        <div id="status"><span class="title">Leaderboard</span></div>
        <div class="chatbox" id="chatbox">
            <ul id="chatList" class="chat-list"></ul>
            <input id="chatInput" type="text" class="chat-input" placeholder="Chat here..." maxlength="35" />
        </div>
        <div id="mobile">
           <input type="image" id="split" class="split" src="img/split.png" alt="splitBtn">
           <input type="image" id="feed" class="feed" src="img/feed.png" alt="feedBtn">
        </div>
        <canvas tabindex="1" id="cvs"></canvas>
    </div>
    <div id="startMenuWrapper">
        <div id="startMenu">
            <p>Open Agar</p>
            <input type="text" tabindex="0" autofocus placeholder="Enter your name here" id="playerNameInput" maxlength="25" />
            <b class="input-error">Nick must be alphanumeric characters only!</b>
            <br />
            <a onclick="document.getElementById('spawn_cell').play();"><button id="startButton">Play</button></a>
            <button id="spectateButton">Spectate</button>
            <button id="settingsButton">Settings</button>
            <br />
            <div id="settings">
                <h3>Settings</h3>
                <ul>
                    <label><input id="visBord" type="checkbox">Show border</label>
                    <label><input id="showMass" type="checkbox">Show mass</label>
                    <br />
                    <label><input id="continuity" type="checkbox">Continue moving when mouse is off-screen</label>
                    <br />
                    <label><input id="roundFood" type="checkbox" checked>Rounded food</label>
                    <label><input id="darkMode" type="checkbox">Toggle Dark Mode</label>
                </ul>
            </div>
            <div id="instructions">
                <h3>Gameplay</h3>
                <ul>
                    <li>Move your mouse on the screen to move your character.</li>
                    <li>Eat food and other players in order to grow your character (food respawns every time a player eats it).</li>
                    <li>A player's mass is the number of food particles eaten.</li>
                    <li>Objective: Try to get fat and eat other players.</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- JS -->
    <script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
